<?php include 'function.php'; ?>
<!DOCTYPE html>
 	<html>
    <head>
        <title>Hamming Code</title>
        <script type="text/javascript" src="<?php echo $base_path."res/jquery-2.0.3.min.js"; ?>"></script>
        <style type="text/css">
            *{
              margin: 0;
              padding: 0;
            }

            body, html{
              height: 100%;
            }

            .container{
              display: table;
              height: 100%;
              width: 100%;
            }

            #sidebar, #content {
              display: table-cell;
              height: 100%; 
            }

            #sidebar {
              position: fixed;
              width: 300px;
              left: 0;
              background: #FFF;
              z-index: 1;
              border-right:#000 solid 3px; 
            }

            #content {
              z-index: 0;
              position: absolute;
              margin-left: 305px;
              background: #FFF; 
              padding: 10px;
            }
            table#formInput {
                margin: 10px 0 0 10px;
                width: 100%;
                border-collapse:collapse;
            }
            input[type=text] {
                width: 90%;
                height: 18px;
            }
            select {
                width: 90%;
                height: 18px;
            }
            input[type=button] {
                margin-top: 10px;
                padding:2px;
            }
            table.tableStd,table.tableStd th,table.tableStd td{ 
                border-collapse:collapse;
                padding: 2px;
            }
            #errorBox {
                background-color: #FF8974;
                border: 2px solid #FF4944;
                padding: 10px;
            }
        </style>
        <script type="text/javascript">
            var bit_binary = null;
            var prevBit = null;
            var is_clear = null;
            var errorBinaryChecker = null; 
            var errorBinary = null;
            
            function clearAll(val) {
                $("#isClear").val(val);
                if (val === 1) {
                    $("#binary").val('');
                    $("#errorBinaryChecker").val(''); 
                    $("#errorBinary").val('');
                }
            }
            
            function computeBinaryGenerator() {
                bindData();
                $.ajax({
                   url: '<?php echo $base_path."binarygenerator.php" ?>',
                   type: 'POST',
                   data: {bits: bit_binary},
                   success : function (response){
                        $("#errorBinaryChecker").val(response.binary); 
                        $("#errorBinary").val(response.binary);
                        $("#prevBit").val(bit_binary);
                        bindData();
                        callHammingCode();
                   },
                   dataType: "JSON"
                });
            }
            
            function callHammingCode() {
                $.ajax({
                   url: '<?php echo $base_path."hammingcode.php" ?>',
                   type: 'POST',
                   data: {bits : bit_binary, is_clear: is_clear, errorBinaryChecker: errorBinaryChecker, errorBinary: errorBinary},
                   success : function (response){
                        $("#content").html(response);
                        markError();
                   },
                   dataType: "HTML"
                });
            }
            
            function computeHammingCode() {
                bindData();
                if(is_clear == 0 && errorBinaryChecker == '') {
                    return computeBinaryGenerator();
                }
                if(prevBit != null && prevBit != bit_binary) {
                    return computeBinaryGenerator();
                }
                callHammingCode();
            }
            
            function bindData() {
                bit_binary = $("#bit_binary").val();
                prevBit = $("#prevBit").val();
                errorBinaryChecker = $("#errorBinaryChecker").val(); 
                errorBinary = $("#errorBinary").val(); 
                is_clear = $("#isClear").val();
            }
            
            function markError() {
                $(document).ajaxComplete(function() {
                    var className = $('#error').attr("class");
                    if (className != undefined && className != null)
                        $('.'+className).css("background","#FF8974");
                });
            }
            
            $(document).ready(function() {
                $(".binary").keydown(function(event) {
                   if ( $.inArray(event.keyCode,[46,8,9,27,13]) !== -1 ||
                       (event.keyCode === 65 && event.ctrlKey === true) ||
                       (event.keyCode >= 35 && event.keyCode <= 39)) {   
                            return;
                   }
                   else {
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 49) && (event.keyCode < 96 || event.keyCode > 105 )) {
                           event.preventDefault(); 
                       }   
                   }
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div id="sidebar">
                <form>
                	
                    <table id="formInput">
                    	  <tr>
                            <td><h2> Hamming Code</h2></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>	
                        </tr>
                        <tr>
                            <td>Pilih panjang data yang akan disimulasikan</td>
                        </tr>
                        <tr>
                            <td>
                                <?php $arr_bits = array("4","8","16","32","64","128","256"); ?>
                                <select name="bit_binary" id="bit_binary" class="bit_binary">
                                    <?php foreach($arr_bits as $item) { ?>
                                    <option value="<?php echo $item; ?>"><?php echo $item; ?></option>
                                    <?php } ?>
                                </select>
                                <input type="hidden" name="prevBit" id="prevBit" />
                            </td>
                        </tr>
                        <tr>
                            <td>Modifikasi biner berikut untuk mengetahui kesalahan</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="hidden" name="errorBinaryChecker"  class="binary" id="errorBinaryChecker" value="" />
                                <input type="text" name="errorBinary"  class="binary" id="errorBinary" value="" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" name="" id="computeError" onclick="clearAll(0);computeHammingCode();" value="Jalankan Hamming Code" />
                                <input type="button" name="" id="clear" onclick="clearAll(1);computeHammingCode();" value="Bersihkan" />
                                <input type="hidden" name="" id="isClear" value="" />
                            </td>
                        </tr>
                    </table>
                </form>
                <center>
                    <div style="margin-left: 50px; bottom:30px;position: absolute; font-weight: bold">
                        <center>Oleh</center>
                        <center>Bayu Santoso (G64134017)</center>
                        <center>dan</center>
                        <center>Shofyan (G64134009)</center>
                    </div>
                </center>
            </div>
            <div id="content">

            </div>
        </div>
    </body>
</html>